<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <style>
        #app{
            width: 360px;
            height: 380px;
            background-color: #d7d2d2;
            border: #B3C0D1 2px solid;
            border-radius: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        h1{
            text-align: center;
            margin-top: 40px;
        }

    </style>
</head>
<body>
    <div id="app" >
        <h1>登录</h1>
        <el-form>
            <el-form-item style="text-align: center">
                <el-input v-model="user.name" placeholder="用户名" style="width: 290px;" ></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-input type="password" v-model="user.pwd" placeholder="密码" autocomplete="off" style="width: 290px;"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" @click="login" style="padding-right: 128px; padding-left: 128px">登录</el-button>
            </el-form-item>
            <el-form-item style="text-align: center">
                <a class="reg" href="register.html">没有账号,立即注册</a>
            </el-form-item>

        </el-form>
    </div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            user:{name:"",pwd:""},
            goods:[],
        },
        created() {

        },
        methods : {
            login(){
                let p = new URLSearchParams();
                p.append("name",this.user.name);
                p.append("pwd",this.user.pwd);

                axios.post("login",p).then(res=>{
                    if(res.data.code == 200){
                        this.$message(res.data.msg);
                        location.href="goods.html";
                    } else if(res.data.code == 500){
                        this.$alert(res.data.msg);
                    } else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        }
    })
</script>
</body>
</html>